<template>
  <el-main class="bg table_wrap i_want_to_customize_it">
    <div class='div-form'>
      <el-form ref="elFormRef" :model="formInline" label-width="90px" :style="{ width: '100%' }" label-position="left">
        <el-row :gutter="20">
						<el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap">
				<el-form-item label="订单号">
								<el-input v-model="formInline.order_number"></el-input>
							</el-form-item>
			</el-col>
											<el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap">
				<el-form-item label="商品名称">
								<el-input v-model="formInline.product_name"></el-input>
							</el-form-item>
			</el-col>
																																			<el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap">
				<el-form-item label="用户姓名">
								<el-input v-model="formInline.user_name"></el-input>
							</el-form-item>
			</el-col>
																					<el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap">
				<el-form-item label="审核状态">
					<el-select v-model="formInline.examine_state">
						<el-option value="">全部</el-option>
						<el-option value="未审核">未审核</el-option>
						<el-option value="已通过">已通过</el-option>
						<el-option value="未通过">未通过</el-option>
					</el-select>
				</el-form-item>
			</el-col>
			<el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap">
				<el-form-item label="支付状态">
					<el-select v-model="formInline.pay_state">
						<el-option value="">全部</el-option>
						<el-option value="未支付">未支付</el-option>
						<el-option value="已支付">已支付</el-option>
					</el-select>
				</el-form-item>
			</el-col>
        </el-row>
      </el-form>
    </div>
    <baseTable :tableColumns="columns" requestApi='/api/i_want_to_customize_it/get_list' :isShowSelect="true" :vm="vm"
               v-model:isRefresh="isRefresh" :otherParams="formInline"
               @handleSelectionChange="handleSelectionChange"
               @handleCurrentChangeNew="handleCurrentChangeNew"
    >
      <!-- 头部按钮 -->
      <template #baseHeadFunt>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button @click="onReset(true)">重置</el-button>
        <el-button
            v-if="$check_action('/i_want_to_customize_it/table','del') || $check_action('/i_want_to_customize_it/view','del')"
            class="search_btn_del" type="danger" @click="delInfo()">删除
        </el-button>
      </template>
      <!-- 操作 -->
      <template #baseTableFunt="{ scope }">
        <el-button type="primary" v-if="user_group == '管理员' || $check_action('/i_want_to_customize_it/table','set')" size="small"
                    @click="router.push('./view?i_want_to_customize_it_id='+scope.row.i_want_to_customize_it_id)">详情
        </el-button>
        <el-button v-if="scope.row.pay_state == '未支付' && $check_option('/i_want_to_customize_it/table','pay')"  class="e-button el-button--small is-plain el-button--primary"
                   @click="toPay(scope.row)" size="small">支付
        </el-button>
      </template>
      <template #baseTableFunt2="{ scope }">
        <el-button type="primary" v-if="user_group == '管理员' || $check_action('/i_want_to_customize_it/table','set')" size="small"
            @click="router.push('./view?i_want_to_customize_it_id='+scope.i_want_to_customize_it_id)">详情
        </el-button>
<el-button v-if="scope.pay_state == '未支付' && $check_option('/i_want_to_customize_it/table','pay')"  class="e-button el-button--small is-plain el-button--primary"
           @click="toPay(scope)" size="small">支付
</el-button>
      </template>
      <template #tableContent="{ scope, column }">
                                    <span v-if="column.prop === 'product_cover'">
        <el-image
            :preview-teleported="true"
            style="width: 60px; height: 60px"
            :src="$fullUrl($banseUrl,scope.row.product_cover)"
            :preview-src-list="[$fullUrl($banseUrl,scope.row.product_cover)]"
            :initial-index="0"
            fit="cover">
      </el-image>
      </span>
                  <span v-if="column.prop === 'production_date'">{{$toTime(scope.row.production_date, "YYYY-MM-DD")}}</span>
                  <span v-if="column.prop === 'shelf_life'">{{formatDate(scope.row.shelf_life)}}</span>
                  <span v-if="column.prop === 'merchant_users'">{{ scope.row['merchant_users']?getObj(list_user_merchant_users,scope.row['merchant_users']).nickname+"-"+getObj(list_user_merchant_users,scope.row['merchant_users']).username:"" }}</span>
                                                  <span v-if="column.prop === 'customized_users'">{{ scope.row['customized_users']?getObj(list_user_customized_users,scope.row['customized_users']).nickname+"-"+getObj(list_user_customized_users,scope.row['customized_users']).username:"" }}</span>
                          <a v-if="column.prop === 'customized_attachments'" :href="$fullUrl($banseUrl, scope.row['customized_attachments'])" target="_blank" style="color: rgb(64, 158, 255)">点击下载</a>
                  <span v-if="column.prop === 'delivery_date'">{{$toTime(scope.row.delivery_date, "YYYY-MM-DD")}}</span>
                  <span v-if="column.prop === 'customized_audio'"><a href="javascript:void(0)" @click="customized_audioAudioPlay($fullUrl($banseUrl, scope.row['customized_audio']))">点此播放</a></span>
                  <span v-if="column.prop === 'customized_videos'"><a href="javascript:void(0)" @click="customized_videosVideoPlay($fullUrl($banseUrl, scope.row['customized_videos']))">点此播放</a></span>
                      <span v-if="column.prop === 'create_time'">{{formatDate(scope.row.create_time)}}</span>
        <span v-if="column.prop === 'update_time'">{{formatDate(scope.row.update_time)}}</span>
      </template>

      <template #tableContent2="{ scope, column }">

                                                                                                                                                                                          <span v-if="column.prop === 'production_date'"> {{ column.label }}：{{$toTime(scope.production_date, "YYYY-MM-DD")}}</span>
                                                    <span v-if="column.prop === 'shelf_life'"> {{ column.label }}：{{formatDate(scope.shelf_life)}}</span>
                                                    <span v-if="column.prop === 'merchant_users'"> {{ column.label }}：{{ scope['merchant_users']?getObj(list_user_merchant_users,scope['merchant_users']).nickname+"-"+getObj(list_user_merchant_users,scope['merchant_users']).username:"" }}</span>
                                                                                                                                                                                    <span v-if="column.prop === 'customized_users'"> {{ column.label }}：{{ scope['customized_users']?getObj(list_user_customized_users,scope['customized_users']).nickname+"-"+getObj(list_user_customized_users,scope['customized_users']).username:"" }}</span>
                                                                                    <span v-if="column.prop === 'customized_attachments'">  {{ column.label }}<a :href="$fullUrl($banseUrl, scope.customized_attachments)" target="_blank" style="color: rgb(64, 158, 255)"> 点击下载</a></span>
                                                    <span v-if="column.prop === 'delivery_date'"> {{ column.label }}：{{$toTime(scope.delivery_date, "YYYY-MM-DD")}}</span>
                                                    <span v-if="column.prop === 'customized_audio'">{{ column.label }}：<a href="javascript:void(0)" @click="customized_audioAudioPlay($fullUrl($banseUrl, scope['customized_audio']))">点此播放</a></span>
                                                    <span v-if="column.prop === 'customized_videos'"> {{ column.label }}：<a href="javascript:void(0)" @click="customized_videosVideoPlay($fullUrl($banseUrl, scope['customized_videos']))">点此播放</a></span>
                                                                <span v-if="column.prop === 'create_time'"> {{ column.label }}：{{formatDate(scope.create_time)}}</span>
        <span v-if="column.prop === 'update_time'"> {{ column.label }}：{{formatDate(scope.update_time)}}</span>
      </template>
    </baseTable>
                                    <el-dialog
        title="音频详情"
        v-model="customized_audioAudioPlayerModalVisible"
        width="30%"
    >
      <audio
          id="customized_audioAudioPlayer"
          :src="customized_audioAudioUrl"
          autoplay="autoplay"
          width="100%"
          controls
      >
        您的浏览器不支持Audio标签。
      </audio>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="customized_audioCancelAudioModalVisible"
          >取 消</el-button
          >
        </span>
      </template>
    </el-dialog>
        <el-dialog title="视频详情" v-model="customized_videosPlayerModalVisible" width="30%">
      <video
          id="customized_videosPlayer"
          :src="customized_videosVideoUrl"
          autoplay="autoplay"
          width="100%"
          controls
      >
        您的浏览器不支持Video标签。
      </video>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="customized_videosCancelModalVisible">取 消</el-button>
        </span>
      </template>
    </el-dialog>
        <detailsDialog :detailObj="detailObj" v-model:dialogVisible="dialogDetailVisible" @handleSuccess='handleSuccess'  url="/api/i_want_to_customize_it/set"  field="i_want_to_customize_it_id"  IdName="i_want_to_customize_it_id"></detailsDialog>
  </el-main>
</template>
<script setup>
  import {useRouter} from "vue-router";

  let router = useRouter();
  import {
          $get_auth,
          func,
          paramsFun,
          $fullUrl,
          formatDate,
          $banseUrl,
          $check_action,
          $toTime,
  } from "@/utils/utils.js";
  import { $post, $get } from "@/api/Api.js";
  import {Picture} from "@element-plus/icons-vue";
  import {ElMessage} from "element-plus";
  import {ref, toRefs, computed, onMounted} from "vue"
  import storageHelper from '@/libs/StorageHelper'
  import detailsDialog from "../pay/details.vue";

  let user_group = storageHelper.getUserInfo().user_group;
  let table = ref("i_want_to_customize_it")
  let field = ref("i_want_to_customize_it_id")
  let url_get_list = ref("/api/i_want_to_customize_it/get_list")
  let url_del = ref("/api/i_want_to_customize_it/del")
  // 头部搜索// 搜索
  let formInline = ref({
          "order_number": "",
                  "product_name": "",
                                  "user_name": "",
                    "orderby": `create_time desc`
  })
                                        // 用户列表
  let list_user_merchant_users=ref([])
  //商城卖家用户列表
  let get_list_user_merchant_users= async() =>{
    let json = await $get("/api/user/get_list?user_group=商家用户");
    if(json.result){
      list_user_merchant_users.value = json.result.list;
    }
    else if(json.error){
      console.error(json.error);
    }
  }
                                  // 用户列表
  let list_user_customized_users=ref([])
  //商城卖家用户列表
  let get_list_user_customized_users= async() =>{
    let json = await $get("/api/user/get_list?user_group=注册用户");
    if(json.result){
      list_user_customized_users.value = json.result.list;
    }
    else if(json.error){
      console.error(json.error);
    }
  }
                            let detailObj=ref({})
  let dialogDetailVisible=ref(false)
  // 支付
  let toPay=(val)=>{
    detailObj.value=val
    dialogDetailVisible.value=true
  }
  // 支付成功回调
  let handleSuccess=()=>{
    isRefresh.value = true;
  }
  let vm = ref({
                                                    img: "product_cover",
                                                                                                                                                                                        id: "i_want_to_customize_it_id"
  })
  // 列名
  const columns =[
          {"prop": "order_number", "label": "订单号",fieldType:1},
                {"prop": "product_number", "label": "商品编号",fieldType:1},
                {"prop": "product_name", "label": "商品名称",fieldType:1},
                {"prop": "product_cover", "label": "商品封面",fieldType:4},
                {"prop": "production_date", "label": "生产日期",fieldType:3},
                {"prop": "shelf_life", "label": "保质时间",fieldType:3},
                {"prop": "merchant_users", "label": "商家用户",fieldType:2},
                {"prop": "customized_pricing", "label": "定制价格",fieldType:1},
                {"prop": "album", "label": "商品相册",fieldType:1},
                {"prop": "purchase_quantity", "label": "购买数量",fieldType:1},
                {"prop": "total_price", "label": "总价格",fieldType:1},
                {"prop": "customized_users", "label": "定制用户",fieldType:2},
                {"prop": "user_name", "label": "用户姓名",fieldType:1},
                {"prop": "customized_attachments", "label": "定制附件",fieldType:4},
                {"prop": "delivery_date", "label": "交付日期",fieldType:3},
                {"prop": "customized_audio", "label": "定制音频",fieldType:4},
                {"prop": "customized_videos", "label": "定制视频",fieldType:4},
                {"prop": "customized_images", "label": "定制图片",fieldType:1},
          {"prop": "examine_state", "label": "审核状态",fieldType:1},
    {"prop": "examine_reply", "label": "审核回复",fieldType:1},
    { prop: "seat", label: "座位" ,fieldType:1},
    {"prop": "create_time", "label": "创建时间",fieldType:3},
    {"prop": "update_time", "label": "更新时间",fieldType:3},
  ]
  // 刷新table
  let isRefresh = ref(false)
  //批量勾选数据框
  let selectList = ref([])
  //点击数据
  let currentRowTableProduct = ref({})
  let showModal = ref(false)
                                  let customized_audioAudioPlayerModalVisible = ref(false);
  let customized_audioAudioUrl = ref("");
  let customized_audioAudioPlay = (v) => {
      customized_audioAudioUrl.value = v;
      customized_audioAudioPlayerModalVisible.value = true;
  };
  let customized_audioCancelAudioModalVisible = () => {
      customized_audioAudioUrl.value = "";
      customized_audioAudioPlayerModalVisible.value = false;
  };
      let customized_videosPlayerModalVisible = ref(false);
  let customized_videosVideoUrl = ref("");
  let customized_videosCancelModalVisible = () => {
      customized_videosPlayerModalVisible.value = false;
      customized_videosVideoUrl.value = "";
  };
  let customized_videosVideoPlay = (v) => {
      customized_videosVideoUrl.value = v;
      customized_videosPlayerModalVisible.value = true;
  };
      // 关闭弹框
  let closeModal = () => {
    showModal.value = false;
  };
  //表格勾选回调
  let handleSelectionChange = (val) => {
    console.log(val)
    selectList.value = val.map((item) => {
      if (item.i_want_to_customize_it_id !== undefined) {
        return item.i_want_to_customize_it_id
      } else {
        return item
      }
    })
  }
  //点击当前行
  let handleCurrentChangeNew = (val) => {
    currentRowTableProduct.value = val
  }

  // 搜索
  let onSubmit = () => {
    isRefresh.value = true
  }
  // 重置
  let onReset = (refresh) => {
    formInline.value = {
                  "order_number": "",
                                  "product_name": "",
                                                                  "user_name": "",
                                      "create_time": "",
      "orderby": `create_time desc`
    }
    isRefresh.value = refresh
  }
  // 批量删除删除
  let delInfo = () => {
    ElMessageBox.confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
        .then(() => {
          selectList.value.map((item) => {
            delFun(item)
          })
        })
        .catch(() => {
          ElMessage({
            type: 'info',
            message: '取消操作',
          })
        })
  }
// 调用删除方法
let delFun = (id) => {
  $get(url_del.value,{i_want_to_customize_it_id: id}).then((json) => {
    if (json.result) {
      isRefresh.value = true;
      ElMessage.success("删除成功");
    } else if (json.error) {
      ElMessage.error(json.error);
    }
    isRefresh.value = true;
  });
};
  let get_list_before = () => {
    if(user_group != "管理员"){
              let sqlwhere = "(";
                                                                                                                                                          if(user_group=="商家用户"){
                sqlwhere+= "merchant_users = " + this.user.user_id + " or ";
              }
                                                                                                                              if(user_group=="注册用户"){
                sqlwhere+= "customized_users = " + this.user.user_id + " or ";
              }
                                                                                                                                                      if (sqlwhere.length>1){
            sqlwhere = sqlwhere.substr(0,sqlwhere.length-4);
            sqlwhere += ")";
            formInline.value["sqlwhere"] = sqlwhere;
          }
        }
  }
  // 查询数组对象某个是否包含某个值,返回对应对象
  let getObj = (arr, val) => {
    let obj = arr.find((item) => item.user_id == val);
    if (obj) {
        return obj;
    } else {
        return "-";
    }
  };
  onMounted(() => {
    get_list_before()
                                      get_list_user_merchant_users()
                                get_list_user_customized_users()
                            })
</script>
<style lang="less" scoped>
  .div-form {
    padding: 10px;
  }
</style>